<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../util/bootstrap-4.6.0/css/bootstrap.css">
    <link rel="stylesheet" href="../../util/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <title>Table Grid</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }

        .table-content {
            width: 96%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .table-content h3 {
            margin: 30px 0 30px 0;
        }

        .ibox-content {
            height: auto;
        }

    </style>
</head>
<body>

<div class="table-content table-responsive">
    <h3>报关单表头列表</h3>
    <form hidden>搜索条件表单</form>
    <div class="ibox-content">
        <div id="headToolbar" class="toolbar">
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="refresh"><i
                    class="fa fa-refresh"></i>刷新</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="importExcel"><i
                    class="fa fa-arrow-down"></i>导入Excel</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="exportExcel1"
               data-toggle="popover" data-trigger="hover" data-placement="top" data-content="表头表体按Sheet分开，表头表体均为List列表">
                <i class="fa fa-arrow-up"></i>导出Excel</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="exportExcel2"
               data-toggle="popover" data-trigger="hover" data-placement="top"
               data-content="表头表体一对多在同一个Sheet中，动态生成Sheet">
                <i class="fa fa-arrow-up"></i>导出Excel</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="exportExcel3"
               data-toggle="popover" data-trigger="hover" data-placement="top"
               data-content="表头表体一对多在同一个Sheet中，对应一个Excel文件。多个Excel压缩为Zip文件导出">
                <i class="fa fa-arrow-up"></i>导出Excel</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="downPdf"><i
                    class="fa fa-download"></i>下载PDF</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="zipPdf"><i
                    class="fa fa-download"></i>打包下载PDF</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="batchPdf"><i
                    class="fa fa-download"></i>批量下载PDF</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="exportXml"><i
                    class="fa fa-arrow-up"></i>导出XML</a>
            <a href="javascript:;" class="btn btn-outline-primary btn-sm" role="button" id="importXml"><i
                    class="fa fa-arrow-down"></i>导入XML</a>
        </div>
        <table class="table table-bordered table-hover" id="headTable"></table>
    </div>
    <h3>报关单商品列表</h3>
    <div class="ibox-content">
        <table class="table table-bordered table-hover" id="goodsTable"></table>
    </div>

</div>
<script src="../../js/jquery-1.12.0.min.js"></script>
<script src="../../util/layer/layer.js"></script>
<script src="../../util/bootstrap-4.6.0/js/bootstrap.js"></script>
<script src="../../util/bootstrap-4.6.0/js/bootstrap.bundle.js"></script>
<script src="../../util/bootstrap-table-master/bootstrap-table.js"></script>
<script src="../../util/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
<script src="../../util/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(function () {
        //初始化bootstrap的popover弹框组件
        $('[data-toggle="popover"]').popover();
        //加载head table grid,加载成功后回调加载body table grid
        initHeadGrid();
    });

    let headColumns = [
        {title: "多选", field: "select", checkbox: true, align: "center", width: "30"},
        {title: "单据编号", field: "seqNo", align: "center", sortable: true, order: "desc"},
        {title: "预录入编号", field: "etpsPreentNo", align: "center", sortable: true, order: "desc"},
        {title: "申报单位", field: "agentName", align: "center", sortable: true, order: "desc"},
        {title: "提单号", field: "billNo", align: "center", sortable: true, order: "desc"},
        {title: "合同号", field: "contractNo", align: "center", sortable: true, order: "desc"},
        {title: "集装箱数量", field: "containerNum", align: "center", sortable: true, order: "desc"},
        {
            title: "进出口日期", field: "iEDate", align: "center", sortable: true, order: "desc",
            formatter: function (value, row, index) {
                if (!value) return value;
                let fieldValue = value.replace(/-/g, "/");
                fieldValue = DateUtil.dateToStr("yyyy-MM-dd HH:mm:ss", new Date(fieldValue));
                return fieldValue;
            }
        },
        {
            title: "申报时间", field: "dclTime", align: "center", sortable: true, order: "desc",
            formatter: function (value, row, index) {
                if (!value) return value;
                let fieldValue = value.replace(/-/g, "/");
                fieldValue = DateUtil.dateToStr("yyyy-MM-dd HH:mm:ss", new Date(fieldValue));
                return fieldValue;
            }
        }
    ];
    let headParam = Utils.deepClone(DataGridUtils.gridParam);
    headParam.gridId = 'headTable';
    headParam.url = '/demoEntry/headList';
    headParam.columns = headColumns;
    headParam.isPagination = false;
    headParam.height = 300;

    let goodsColumns = [
        {title: "商品序号", field: "gNo", align: "center", sortable: true, order: "desc"},
        {title: "单据编号", field: "seqNo", align: "center", sortable: true, order: "desc"},
        {title: "商品编号", field: "codeTS", align: "center", sortable: true, order: "desc"},
        {title: "商品名称", field: "gName", align: "center", sortable: true, order: "desc"},
        {title: "商品规格型号", field: "gModelName", align: "center", sortable: true, order: "desc"},
        {title: "申报单价", field: "declPrice", align: "center", sortable: true, order: "desc"},
        {title: "申报数量", field: "gQty", align: "center", sortable: true, order: "desc"},
        {title: "申报总价", field: "declTotal", align: "center", sortable: true, order: "desc"},
        {title: "净重", field: "netWt", align: "center", sortable: true, order: "desc"},
        {title: "毛重", field: "grossWet", align: "center", sortable: true, order: "desc"}
    ];
    let goodsParam = Utils.deepClone(DataGridUtils.gridParam);
    goodsParam.gridId = 'goodsTable';
    goodsParam.url = '/demoEntry/goodsList';
    goodsParam.columns = goodsColumns;
    goodsParam.isPagination = false;
    headParam.height = 200;

    function initHeadGrid() {
        DataGridUtils.initGridByUrl(headParam);
    }

    function initGoodsGrid(queryParam) {
        goodsParam.queryParamObj = queryParam;
        DataGridUtils.initGridByUrl(goodsParam);
    }

    //table grid加载完成后回调
    function __onLoadSuccess(rows, param) {
        console.info('after table load success...gridId=', param.gridId, "rows=", JSON.stringify(rows))
        if (param.gridId === 'headTable') {
            //默认加载表头第一条记录对应的表体数据列表
            initGoodsGrid({seqNo: rows[0].seqNo});
        }
    }

    //table grid渲染完成后回调
    function _afterRenderTable(data, param) {
        console.info('after render table...data=', JSON.stringify(data))
    }

    //点击row的回调
    function __onClickRow(row, $element, param) {
        //console.info('click row param.gridId=', param.gridId)
        //点击表头row时，根据seqNo加载表体数据
        if (param.gridId === 'headTable') {
            goodsParam.queryParamObj = {seqNo: row.seqNo};
            DataGridUtils.refresh(goodsParam);
        }
    }

    /****************************点击事件******************************/
    //只刷新表头grid
    $("#refresh").click(function () {
        DataGridUtils.refresh(headParam);
    });
    //导出excel1:表头表体分开在不同的sheet页
    $("#exportExcel1").click(function () {
        let selectRows = DataGridUtils.getSelectRows("headTable");
        //console.info('selectRows=', JSON.stringify(selectRows), 'selectRows.length=', selectRows.length);
        //selectRows非空校验
        if (selectRows.length === 0) {
            layer.msg("请选择操作数据！", {icon: 2, timeout: 1500});
            return;
        }
        let rowIds = selectRows.map(eachRow => {
            return eachRow.id;
        }).join();
        let exportExcelUrl = "/demoEntry/exportExcelHeadBodyEachSheet?ids=" + rowIds + "&fileName=ExcelExportNormal";
        formExport(exportExcelUrl, false, 'post');
    });

    //导出excel2:表头表体在同一个sheet，多个sheets
    $("#exportExcel2").click(function () {
        let selectRows = DataGridUtils.getSelectRows("headTable");
        //console.info('selectRows=', JSON.stringify(selectRows), 'selectRows.length=', selectRows.length);
        //selectRows非空校验
        if (selectRows.length === 0) {
            layer.msg("请选择操作数据！", {icon: 2, timeout: 1500});
            return;
        }
        let rowIds = selectRows.map(eachRow => {
            return eachRow.id;
        }).join();
        let exportExcelUrl = "/demoEntry/exportExcelHeadBodySameMultiSheet?ids=" + rowIds + "&fileName=ExcelExportMultiSheet";
        formExport(exportExcelUrl, false, 'post');
    });

    //导出excel3:表头表体在同一个sheet，多个excel压缩zip下载
    $("#exportExcel3").click(function () {
        let selectRows = DataGridUtils.getSelectRows("headTable");
        //console.info('selectRows=', JSON.stringify(selectRows), 'selectRows.length=', selectRows.length);
        //selectRows非空校验
        if (selectRows.length === 0) {
            layer.msg("请选择操作数据！", {icon: 2, timeout: 1500});
            return;
        }
        let rowIds = selectRows.map(eachRow => {
            return eachRow.id;
        }).join();
        let exportExcelUrl = "/demoEntry/exportExcelSameSheetZipBatch?ids=" + rowIds + "&fileName=ExcelExportBatch";
        formExport(exportExcelUrl, false, 'post');
    });

</script>

</body>
</html>